'use strict';

import React from 'react';
import './index.scss';
import {Navigation,Icon,Menu,Button,Dialog} from 'qnui';
const {Item, Group} = Navigation

let onMouseEnter = (id, item, nav) => {
    console.log('onMouseEnter')  
}

let onMouseLeave = (id, item, nav) => {
    console.log('onMouseLeave')
}
class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
	  user_nick:"请登录",
	  expire_time:""
    };
  };
  
	componentDidMount(){
		this.setState({
			version:window.info.ver_str,
			user_nick:window.info.user_nick,
			deadline_str:window.info.deadline_str
		});
	}
	onLogout(){
		window.location.href="/index.php/QnuiRings/Index/logout";
	}
	showClass(){
		Dialog.alert({content:"演示正在制作中。。。"});
	}
	handleMenuClick(key){
		switch(key){
			case "11":
				//电商课程
				Dialog.alert({content:<a href="https://alimarket.taobao.com/markets/qnww/qn-news?spm=a21go.8142497.0.0" target="_blank">千牛头条</a>});
			break;
			case "12":
				//公司介绍
				Dialog.alert({content:"博乐市微折软件开发工作室出品"});
			break;
			case "13":
				//联系客服
				Dialog.alert({content:"客服旺旺：kekydream，电话：15022831082"});
			break;
		}
	}
  render() {
    return (
       <Navigation
        onMouseEnter={onMouseEnter}
        onMouseLeave={onMouseLeave}
        type="filling"
        activeDirection="bottom"
        >
        <li className="navigation-logo-zone">
          <a href="/" className='sui-brand'><img src="//img.alicdn.com/imgextra/i3/27390555/TB2HOkvd4tmpuFjSZFqXXbHFpXa-27390555.gif" /></a>
        </li>
			<Item
				itemid="2"
				text="查看演示"
				icon="training"
				onClick={this.showClass.bind(this)}
				>
			</Item>
			<Item
			itemid="1"
			text="设置"
			icon="set"
			style={{float:"right"}}
			>
				<Menu onClick={this.handleMenuClick.bind(this)} >
					<Menu.PopupItem label="更多设置" key="5">
					  <Menu>
						<Menu.Item key="11">电商课程</Menu.Item>
						<Menu.Item key="12">公司介绍</Menu.Item>
						<Menu.Item key="13">联系客服</Menu.Item>
					  </Menu>
					</Menu.PopupItem>
					<Menu.Item key="1" onClick={this.onLogout.bind(this)}>退出</Menu.Item>
				</Menu>
			</Item>
				<li className="navigation-toolbar">
				  <ul>
					<li>
					  <span>{this.state.user_nick}</span>
					</li>
					<li>
					  <span>{this.state.version}</span>
					</li>
					<li>
					  <span>{this.state.deadline_str}到期</span>
					</li>
					<li>
					  <a href="https://fuwu.taobao.com/ser/detail.htm?service_code=FW_GOODS-1840332&tracelog=user_update" target="_blank"><Button type="dark" shape="warning">续费</Button></a>
					</li>
					<li>
					  <a href="https://fuwu.taobao.com/ser/detail.htm?service_code=FW_GOODS-1840332&tracelog=user_update" target="_blank"><Button type="dark" shape="ghost" >升级</Button></a>
					</li>
				  </ul>
				</li>
    </Navigation>
    );
  }
}
export default Header;
